<template>
  <div class="c-bg-f5f5 c-p">
    <section class="c-bg-white c-ph24 c-pt16 c-bd-b16">
      <div class="c-pt24 c-pb40 c-flex-row c-aligni-center">
        <div class="c-ww88 c-hh88 c-brp50 c-mr30">
          <img class="c-ww88 c-hh88 c-brp50" :src="$addXossFilter(memberInfo.avatar, require('@/assets/defult_head.png'))">
        </div>
        <div class="c-flex-column c-justify-column c-w0 c-flex-grow1 c-h">
          <div class="c-fs48 c-text-ellipsis1 c-mb15">{{parseInt(memberInfo.points)}}</div>
          <div @click="clickIntegraldDetail" class="c-flex-row c-aligni-center c-fc-gray">
            <img class="c-ww22 c-hh22 c-mr6" src="@/assets/i/wap/points/icon_points.png" alt="">
            <div class="c-fs20 c-mr6">{{companyAuth.integrateName1}}</div>
            <i class="iconfont c-fs10">&#xe60e;</i>
          </div>
        </div>
        <div @click="toRecord" class="theme-fc theme-bd1 c-fs22 c-ww144 c-hh48 c-flex-row c-flex-center c-br24">兑换记录</div>
      </div>
    </section>

    <section v-if="couponList != null && couponList.length > 0" class="c-ph24 c-bg-white c-pt30 c-bd-b16">
      <div class="c-flex-row c-aligni-center c-justify-sb c-fs28">{{customPointName}}兑好劵<span class="c-fs20 c-fc-gray" @click="goMoreCoupons">更多&nbsp;&gt;</span></div>
      <!-- <exchange-coupons :couponList="couponList" @goodCouponsDetail="goodCouponsDetail"></exchange-coupons> -->
      <div class="c-w100 c-pv24 c-bg-white c-contextX-scroll c-flex-row">
        <coupon-item-com @clickCouponItem="goodCouponsDetail(item.goodsId)" :couponInfo="item" v-for="(item,index) in couponList" :key="index" :showFooter="false" :size="'small'" class="c-ww400 c-mr20 c-flex-shrink0 c-bd1">
          <template v-slot:bodyRight>
            <div class="c-flex-column">
              <div class="c-fc-xblack c-fs26 c-fw-b c-text-ellipsis1">{{item.name}}</div>
              <div class="c-fc-xmlred c-fs24 c-mt16">{{item.usePoints}}{{customPointName}}</div>
            </div>
          </template>
        </coupon-item-com>
      </div>
    </section>
    <section class="c-pv30 c-bg-white">
      <div class="c-ph24 c-fs28 c-fc-xblack c-pt10 c-pb30">{{customPointName}}兑好礼</div>
      <div class="c-flex-row c-justify-sb c-ph12">
        <water-fall v-model="goodsList" ref="waterfall">
          <template v-slot:list="{list}">
            <div class="c-p c-br8 c-bg-white c-ph12" v-for="(lItem, lIndex) in list" :key="lIndex" @click="goItem(lItem.goodsId)">
              <div class="c-ww284 maxh426 c-br10 c-mb10">
                <img v-lazy="lItem.cover || require('@/assets/defult270.png')" class="c-ww284 maxh426 c-br10" alt />
              </div>
              <div class="c-ww284 c-fs24 c-mb20">
                <div class="c-text-ellipsis1 c-mb10">{{lItem.name}}</div>
                <div v-if="lItem.stock > 0" class="c-flex-row c-aligni-center">
                  <div class="theme-fc">{{lItem.usePoints}}{{companyAuth.integrateName1}}</div>
                  <div v-if="lItem.linePoints" class="c-text-decoration-through c-fc-gray c-ml14 c-fs20">{{lItem.linePoints}}{{companyAuth.integrateName1}}</div>
                </div>
                <div v-else-if="lItem.stock <= 0" class="theme-fc">暂无库存</div>
              </div>
            </div>
          </template>
        </water-fall>
      </div>
    </section>

    <div v-if="!$isWxApp()" class="c-flex-row c-flex-center c-fs22 theme-fc c-ww144 c-bg-white c-br-tl24 c-br-bl24 c-pf c-p-r0 c-p-b120 c-hh48" :style="'boxShadow: 0px 3px 20px 0px rgba('+ colorRGB +',0.2)'" @click="toInteIndex">赚取{{companyAuth.integrateName1}}</div>
    <loading-status-tem :noData="goodsList == null || goodsList.length == 0" :noMoreData="dataStatus == 'NO_MORE_DATA' && (goodsList && goodsList.length > 0)" :noDataText="'暂无商品'" :showLoading="isLoading"></loading-status-tem>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js"
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import waterFall from "@/components/templates/common/waterfall.vue"
import couponItemCom from "@/components/templates/couponItemCom.vue";
const THEME_RGB_MAP = global.THEME_RGB_MAP;
let pageIndex = 1;
export default {
  name: "InteralMall",
  components: {
    loadingStatusTem,
    waterFall,
    couponItemCom
  },
  data() {
    return {
      customPointName: localStorage.getItem("customPointName"),
      themeColor: localStorage.getItem("colorName") || 'mb5_default',
      colorRGB: '',
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      isLoading: false,
      memberInfo: "",
      goodsList: [],
      couponList: [],
      dataStatus: 'NO_MORE_DATA',
    };
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    //点击积分明细
    clickIntegraldDetail(e) {
      let toPath = '/member/myIntegral/integralDetail';
      this.iosAppRouteChange(toPath);
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    toInteIndex() {
      let toPath = '/member/myIntegral/integralIndex';
      this.iosAppRouteChange(toPath);
    },
    toRecord() {
      let toPath = '/member/myIntegral/exchangeRecord';
      this.iosAppRouteChange(toPath);
    },
    // 获取会员信息详情
    getMember() {
      var $this = this;
      this.memberId = localStorage.getItem("memberId");
      utilJs.getMethod(`${global.apiurl}members`, function (res) {
        $this.memberInfo = res;
        $this.getGoodsList();
      });
    },
    // 查看店铺商品列表
    getGoodsList() {
      let $this = this;
      if ($this.isLoading) {
        return;
      }
      $this.isLoading = true;
      let postUrl = `${global.apiurl}pointMall/goodsList?limit=${10}&page=${pageIndex}`;
      utilJs.getMethod(
        postUrl,
        res => {
          $this.isLoading = false;
          if (pageIndex == 1) {
            $this.goodsList = res.data;
          } else {
            $this.goodsList = [...$this.goodsList, ...res.data];
          }
          if (res.next_page_url == null) {
            $this.dataStatus = res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            $this.dataStatus = 'HAS_MORE_DATA';
            pageIndex++;
          }
        },
        failRes => {
          $this.isLoading = false;
        }
      );
    },
    getCouponList() {
      utilJs.getMethod(global.apiurl + "pointMall/couponList?limit=" + 3 + "&page=" + 1, res => {
        this.couponList = res.data;
      })
    },
    goItem(goodsId) {
      let toPath = `/member/myIntegral/integralProduct?goodsId=${goodsId}`;
      this.iosAppRouteChange(toPath);
    },
    goMoreCoupons() {
      let toPath = `/homePage/valueVoucher/list?isMall=1&isCoupons=1`;
      this.iosAppRouteChange(toPath);
    },
    goodCouponsDetail(goodsId) {
      let toPath = `/member/myIntegral/integralProduct?goodsId=${goodsId}`;
      this.iosAppRouteChange(toPath);
    },
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.dataStatus == 'HAS_MORE_DATA' && that.goodsList.length > 0) {
          that.getGoodsList();
        }
      });
    },
    //微信分享
    wechatShare() {
      let title = `${this.customPointName}商城`;
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl = `${window.location.href.split("#")[0]}#/member/myIntegral/integralMall?refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = window.localStorage.getItem("shareDesc");
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare() {
      let title = `${this.customPointName}商城`;
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl = `${window.location.href.split("#")[0]}#/member/myIntegral/integralMall?refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = window.localStorage.getItem("shareDesc");
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
    initData() {
      pageIndex = 1;
      this.isLoading = false;
      this.dataStatus = 'NO_MORE_DATA';
      this.memberInfo = "";
      this.$refs.waterfall.clear();
      this.goodsList = [];
      this.getMember();
    }
  },
  activated() {
    setDocumentTitle(`${this.customPointName}商城`);// eslint-disable-line
    this.couponList = [];
    this.colorRGB = THEME_RGB_MAP[this.themeColor];
    if (utilJs.checkNeedInitData(this.goodsList, pageIndex)) {
      this.initData();
    }
    this.getCouponList();
    window.addEventListener('scroll', this.windowScrollFunction);
    this.wechatShare();
  },
  deactivated() {
    // this.dataStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>
<style scoped>
.goodCoupons {
  width: 9.4rem;
}
.goodCouponsBg {
  background: url("../../../../public/i/wap/memberIndex/goodCouponsBg.png")
    no-repeat;
  background-size: 100%;
  height: 5.5rem;
}
.falls {
  width: 100%;
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
  column-gap: 0.6rem;
}
.item{
	break-inside: avoid-column;
}
.masonry{
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  column-gap:5px;
}
.maxh426 {
  max-height: 10.65rem;
}
</style>